import React, {useState} from 'react'
import View from '@/components/View'
import PanelGroup from './pages/PanelGroup'
import LineChart from './pages/LineChart'
import GithubCorner from 'react-github-corner'
import OrderList from './pages/OrderList'

const lineChartDefaultData = {
  'New Visits': {
    expectedData: [100, 120, 161, 134, 105, 160, 165],
    actualData: [120, 82, 91, 154, 162, 140, 145],
  },
  Messages: {
    expectedData: [200, 192, 120, 144, 160, 130, 140],
    actualData: [180, 160, 151, 106, 145, 150, 130],
  },
  Purchases: {
    expectedData: [80, 100, 121, 104, 105, 90, 100],
    actualData: [120, 90, 100, 138, 142, 130, 130],
  },
  Shoppings: {
    expectedData: [130, 140, 141, 142, 145, 150, 160],
    actualData: [120, 82, 91, 154, 162, 140, 130],
  },
}

const Dashboard = () => {
  const [lineChartData, setLineChartData] = useState(
    lineChartDefaultData['New Visits']
  )

  const handlerChartData = type => setLineChartData(lineChartDefaultData[type])
  
  return (
    <View className="app-dashboard">
      <GithubCorner href="https://gitee.com/jikey/react-tool-admin" size="60" bannerColor="#40c9c6" target="_blank" />

      <PanelGroup handlerChartData={handlerChartData} />

      <LineChart 
        chartData={lineChartData}
        styles={{
          padding: 12,
          backgroundColor: '#fff',
          marginBottom: '25px',
        }}
      />

      <OrderList />

    </View>
  )
}

export default Dashboard
